<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/mall/order.js?v=}+${new java.util.Date().getTime()}"></script>

<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
    margin-top:0;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .margin-top{
  	margin-top:20px;
  }
  .margin-bottom{
  	margin-bottom:20px;
  }
</style>

<body>
<div id="app" v-cloak>
  <el-container @keyup.enter.native="query">
	<el-header  class="inner_header" style="height:auto;">
		<el-card class="margin-bottom" shadow="never">
	    	<el-form ref="form" :model="queryData" label-width="85px"  :label-position="labelPosition" >
		    	<el-row :gutter="20">
				  <el-col :span="6">
				  		<el-form-item label="订单号:">
					  		<el-input placeholder="请输入订单号" v-model="queryData.orderNo" :size="size" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="联系人:">
					  		<el-input placeholder="请输入姓名" v-model="queryData.linkPerson" :size="size" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="订单状态:">
					  		<el-select v-model="queryData.orderStateCode" :size="size"  placeholder="请选择 " clearable>
						    <el-option
						      v-for="item in orderStatusOpt"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="发货状态:">
					  		<el-select v-model="queryData.sendStatus" :size="size"  placeholder="请选择 " clearable>
						    <el-option
						      v-for="item in sendStatusOpt"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
						</el-form-item>
				  </el-col>
				  <el-col :span="5" :offset="10">
				  	<el-form-item label-width="0">
				  		<el-button type="primary" :size="size" icon="el-icon-search" @click="search">查询</el-button>
				  		<!-- <el-button type="primary" :size="size" icon="el-icon-plus" @click="addItem">增加</el-button> -->
				  	</el-form-item>
				  </el-col>
				</el-row>
	    	</el-form>
	    	</el-card>
	    </el-header>
	    <el-main class="inner_main">
	    	<div>
	    	  <el-table  
	    	    ref="orderDatagrid" 
	    	    :data="datagrid"
			    tooltip-effect="dark"
			    style="width: 100%;"
			    @row-click="datagridSelect"
			    v-loading="queryIng"
			    border
			    highlight-current-row
			    stripe
			    >
			    	<el-table-column type="index" label="序号" width="50"  align="center" header-align="center"></el-table-column>
				    <el-table-column prop="orderNo" label="订单号" width="150" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="orderStateName" label="订单状态" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="sendStatus" label="发货状态" width="100" align="center" header-align="center">
				    	<template slot-scope="scope">
				    		{{formatSendStatus(scope.row.sendStatus)}}
				    	</template>
				    </el-table-column>
				    <el-table-column prop="shopName" label="店铺" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="userName" label="买家名称" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="linkPhone" label="联系电话" width="120" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="linkPerson" label="联系人" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="sumAmount" label="商品金额" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="orderCreateDate" label="下单时间" width="150" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="payType" label="付款方式" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="linkAddress" label="联系地址" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column  label="操作" width="200" fixed="right"  align="center" header-align="center">
				    	<template slot-scope="scope">
					        <el-button type="primary" size="small"  @click="editItem(scope.row)">查看详情</el-button>
					      </template>
				    </el-table-column>
			  </el-table>
			</div>
			<div class="pagination_wrap">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      :layout="pagination_layout"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>
	<!-- dialog 开始 不需要【删除】 -->
	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" :top="0" :close-on-click-modal="false" :show-close="false" fullscreen="true">
	     <div class="detail-container">
		      <el-steps :active="formatStepStatus(addData)" finish-status="success" align-center>
		        <el-step title="提交订单" :description="addData.orderCreate|formatDate"></el-step>
		        <el-step title="支付订单" :description="addData.orderCreate|formatDate"></el-step>
		        <el-step title="等待发货" :description="addData.orderCreate|formatDate"></el-step>
		        <el-step title="确认收货" :description="addData.orderCreate|formatDate"></el-step>
		        <el-step title="完成评价" :description="addData.orderCreate|formatDate"></el-step>
		      </el-steps>
		      <el-card shadow="never"  style="margin-top: 20px">
		      		<div class="operate-button-container" v-show="addData.orderStateCode==2 && addData.sendStatus==0">
			          <el-button size="mini" @click="sendGoods" >确认发货</el-button>
			        </div>
		          <div style="margin-top: 20px">
					<i class="el-icon2-tag-fill"></i>
			        <span class="font-small">基本信息</span>
			      </div>
		      	  <div class="table-layout">
				        <el-row>
				          <el-col :span="4" class="table-cell-title">店铺名</el-col>
				          <el-col :span="8" class="table-cell-title">订单编号</el-col>
				          <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
				          <el-col :span="4" class="table-cell-title">用户账号</el-col>
				          <el-col :span="4" class="table-cell-title">支付方式</el-col>
				        </el-row>
				        <el-row>
				          <el-col :span="4" class="table-cell">{{addData.shopName}}</el-col>
				          <el-col :span="8" class="table-cell">{{addData.orderNo}}</el-col>
				          <el-col :span="4" class="table-cell">暂无</el-col>
				          <el-col :span="4" class="table-cell">{{addData.userName}}</el-col>
				          <el-col :span="4" class="table-cell">{{addData.payType}}</el-col>
				        </el-row>
				        
				   </div>
		          <div style="margin-top: 20px">
			        <i class="el-icon2-tag-fill"></i>
			        <span class="font-small">收货人信息</span>
			      </div>
		          <div class="table-layout">
			        <el-row>
			          <el-col :span="6" class="table-cell-title">收货人</el-col>
			          <el-col :span="6" class="table-cell-title">手机号码</el-col>
			          <el-col :span="12" class="table-cell-title">收货地址</el-col>
			        </el-row>
			        <el-row>
			          <el-col :span="6" class="table-cell">{{addData.linkPerson}}</el-col>
			          <el-col :span="6" class="table-cell">{{addData.linkPhone}}</el-col>
			          <el-col :span="12" class="table-cell">{{addData.linkAddress}}</el-col>
			        </el-row>
			      </div>
			      <div style="margin-top: 20px">
			        <i class="el-icon2-tag-fill"></i>
			        <span class="font-small">商品信息</span>
			      </div>
				  <el-table
			        ref="orderItemTable"
			        :data="addData.itemList"
			        style="width: 100%;margin-top: 20px" border>
			        <el-table-column label="商品图片" width="120" align="center">
			          <template slot-scope="scope">
			            <img :src="scope.row.mainPictureAddress" style="height: 80px">
			          </template>
			        </el-table-column>
			        <el-table-column label="商品名称" align="center">
			          <template slot-scope="scope">
			            <p>{{scope.row.goodsName}}</p>
			          </template>
			        </el-table-column>
			        <el-table-column label="价格" width="120" align="center">
			          <template slot-scope="scope">
			            <p>价格：￥{{scope.row.dealPrice}}</p>
			          </template>
			        </el-table-column>
			        <el-table-column label="属性" width="120" align="center">
			          <template slot-scope="scope">
			            {{scope.row.skuName}}
			          </template>
			        </el-table-column>
			        <el-table-column label="数量" width="120" align="center">
			          <template slot-scope="scope">
			            {{scope.row.buyNum}}
			          </template>
			        </el-table-column>
			        <el-table-column label="小计" width="120" align="center">
			          <template slot-scope="scope">
			            ￥{{scope.row.dealPrice*scope.row.buyNum}}
			          </template>
			        </el-table-column>
			      </el-table>
			      <div style="float: right;margin: 20px">
			        合计：<span class="color-danger">￥{{addData.sumAmount}}</span>
			      </div>
		      </el-card>
	      </div>
		  <div slot="footer" class="dialog-footer" style="text-align: center;">
		    <el-button @click="closeDialog" size="small">返回</el-button>
		  </div>
	 </el-dialog>
	 <!-- dialog 结束 -->
	 
 	<el-dialog :visible.sync="dialogConfig.expressVisible" :close-on-click-modal="false" >
 		<el-form :model="expressData" ref="dialogForm" :rules="rules">
			  <el-form-item label="快递公司：" prop="expressCompanyCode" 
      			:label-width="dialogConfig.formLabelWidth">
		     	<el-select v-model="expressData.expressCompanyCode" @change="expressChange" :size="size"  placeholder="请选择 " style="width:220px;">
				    <el-option
				      v-for="item in expressOptions"
				      :key="item.itemCode"
				      :label="item.itemName"
				      :value="item.itemCodeCopy">
				    </el-option>
				  </el-select>
		     </el-form-item>
		     <el-form-item label="快递单号:" prop="expressOrderCode" 
      			:label-width="dialogConfig.formLabelWidth">
			  	<el-input v-model="expressData.expressOrderCode" :size="size"  auto-complete="off" style="width:220px;"></el-input>
		     </el-form-item>
 		</el-form>
 		<div slot="footer" class="dialog-footer" style="text-align: center;">
		    <el-button @click="closeDialog2" size="small">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')" size="small">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
</html>